<template>
  <div class="parent">
    <h2>使用 Suspense 处理异步内容</h2>
    <!-- Suspense 包裹异步内容 -->
    <Suspense>
      <!-- #default 插槽：异步内容加载完成后显示 -->
      <template #default>
        <AsyncComponent/>
      </template>

      <!-- #fallback 插槽：加载过程中显示的备用内容 -->
      <template #fallback>
        <div class="loading">
          <p>加载中...请稍候</p>
          <div class="spinner"></div>
        </div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
// 动态导入异步组件（需配合 Suspense 使用）
import {defineAsyncComponent} from "vue";

/**
 * 对于包含 async/await 的组件（如 AsyncComponent.vue），
 * Suspense 会将组件的 setup 函数执行完毕（包括所有异步操作完成）视为 “异步加载结束”。
 * 当 setup 中的所有 await 操作（如示例中的数据请求）完成后，Suspense 会自动从 fallback 状态切换到显示 default 插槽的内容。
 * 例如在 AsyncComponent.vue 中，setup 函数使用 await fetchData() 等待数据请求完成，
 * 只有当这个异步操作结束并返回结果后，setup 才会执行完毕，此时 Suspense 认为异步内容已准备好，进而显示组件内容。
 */
const AsyncComponent = defineAsyncComponent(() => import('./17-suspense-asyncComponent.vue')
);
</script>

<style>

</style>